<!DOCTYPE html>  
<html>  
  <head>  
    <title>Map Export</title>  
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">  
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->  
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>  
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>  
  </head>  
  <body>  
    <div id="map" class="map"></div>  
    <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>  
    <script>  
      // this example uses FileSaver.js for which we don't have an externs file.  
      // 这个例子对那些没有外部文件的使用FileSaver.js  
      var map = new ol.Map({  
        layers: [  
          new ol.layer.Tile({  
            source: new ol.source.OSM()  
          }),  
          new ol.layer.Vector({  
            source: new ol.source.Vector({  
              url: 'https://openlayers.org/en/v4.2.0/examples/data/geojson/countries.geojson',  
              format: new ol.format.GeoJSON()  
            })  
          })  
        ],  
        target: 'map',  
        controls: ol.control.defaults({  
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({  
            collapsible: false  
          })  
        }),  
        view: new ol.View({  
          center: [0, 0],  
          zoom: 2  
        })  
      });  
  
      // 单击导出图片的按钮地图执行一次postcompose事件并导出图片  
      document.getElementById('export-png').addEventListener('click', function() {  
        map.once('postcompose', function(event) {  
          var canvas = event.context.canvas;  
          if (navigator.msSaveBlob) {  
            navigator.msSaveBlob(canvas.msToBlob(), 'map.png');  
          } else {  
            canvas.toBlob(function(blob) {  
              saveAs(blob, 'map.png');  
            });  
          }  
        });  
        // 地图同步渲染  
       map.renderSync();  
      });  
    </script>  
  </body>  
</html>  